<template>
    <z-paging ref="paging" v-model="fipList" @query="queryList">
        <u-sticky>
            <view class="heqader_box">
                <hedsty :mrbot="50" :headCentext="'选择'"></hedsty>
            </view>
        </u-sticky>
        <!-- <view class="content_bvox">
            <view class="big_con_box" v-for="(item, index) in fipList" :key="index" @click="bonusBtn(item)">
                <view class="dange_box"
                    :style="{ backgroundImage: item.type == 1 ? 'url(https://morgan.dingxians.cn/static/uniPic/0' + item.level_id + '.png)' : 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }">
                    <view class="dengji_box" v-if="item.type != 1" :class="'dengji_box_' + item.level_id">{{
                        item.level_name }}</view>
                    <view class="dengji_box1" v-else :class="'dengji_box1_' + item.level_id">{{ item.level_name }}
                    </view>
                    <view class="dengjinum_box">x{{ item.num }}</view>
                    <view class="yuan_box">
                        <image src="https://morgan.dingxians.cn/static/fuyuri/18.png" v-if="!item.flag" mode="scaleToFill" />
                        <image src="https://morgan.dingxians.cn/static/bonus/9.png" mode="scaleToFill" v-else />
                    </view>
                    <view class="image_box">
                        <image :src="item.box_prize_image" mode="heightFix" />
                    </view>
                    <view class="yuansu_box">{{ item.price }}元素</view>
                </view>
                <view class="name_box">{{ item.box_prize_name }}</view>
            </view>
            <view class="s" style="width: 160rpx;" v-for="i in 3"></view>
        </view> -->

        <template>
            <view class="content_bvox">
                <view class="big_con_box" v-for="(item, index) in fipList" :key="index" @click="bonusBtn(item)">
                    <view class="dange_box"
                        :style="{ backgroundImage: item.type == 1 ? 'url(https://morgan.dingxians.cn/static/uniPic/0' + item.level_id + '.png)' : 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }">
                        <view class="dengji_box" v-if="item.type != 1" :class="'dengji_box_' + item.level_id">{{
                            item.level_name }}</view>
                        <view class="dengji_box1" v-else :class="'dengji_box1_' + item.level_id">{{ item.level_name }}
                        </view>
                        <view class="yuan_box" @click="bonusBtn(item)">
                            <image src="https://morgan.dingxians.cn/static/fuyuri/18.png" mode="scaleToFill"
                                v-if="!item.flag" />
                            <image src="https://morgan.dingxians.cn/static/bonus/9.png" mode="scaleToFill" v-else />
                        </view>
                        <view class="image_box">
                            <image :src="item.box_prize_image" mode="heightFix" />
                        </view>
                        <view class="yuansu_box">{{ item.recovery_price }}元素</view>
                    </view>
                    <view class="name_box"> {{ item.box_prize_name }}</view>
                    <view class="bujinqi_box">
                        <u-number-box v-model="item.setpValue" :max="item.num">
                            <view slot="minus" class="minus"
                                style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
                            </view>
                            <text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
                                }}</text>
                            <view slot="plus" class="plus"
                                style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
                            </view>
                        </u-number-box>
                    </view>
                </view>
                <view class="s" style="width: 160rpx;" v-for="i in 3"></view>
            </view>
        </template>
        <view class="bottom_box">
            <view class="left">
                总计：{{ selBonusPrice }}元素
            </view>
            <view class="rightanniu_box"
                style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/17.png');" @click="enter">确认
            </view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            noClick: true, //防抖
            fipList: [], //进阶品列表
            allFlag: false, //是否全选
            jinType: ''
        }
    },
    computed: {
        // 选中的商品总数
        selbonusNum() {
            let total_num = 0;
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total_num += item.setpValue
            })
            return total_num;
        },
        // 选中的商品list用于creat页展示、获取id
        selHouObj() {
            let housArr = [];
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                housArr.push(item)
            })
            return housArr;
        },
        // 选中的商品总兑换价
        selBonusPrice() {
            var total = 0;
            this.fipList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total += (item.price * item.setpValue)
            })
            return total.toFixed(2);
        },
    },
    onLoad() {
        this.fipList = []
    },
    onShow() {

    },
    methods: {
        queryList(pageNo, pageSize) {
            let data = {
                status: 1,
                page: pageNo,
                limit: pageSize,
            }
            this.$Request.get(this.$api.bonus.boxOrderPrizes, data).then(res => {
                if (res.code == 200) {
                    res.data.data.forEach((item) => {
                        item.flag = false
                        item.setpValue = item.num
                        this.$store.state.canadvList.forEach((val) => {
                            if (item.id == val.id) {
                                item.flag = true
                            }
                        })
                    });
                    this.$refs.paging.complete(res.data.data)
                }
            })
        },
        // 选择赏袋赏品
        bonusBtn(item) {
            item.flag = !item.flag
            console.log(this.selbonusNum, '需要操作的赏品总数')
            console.log(this.selBonusPrice, '需要操作的赏品总兑换价格')
            console.log(this.selHouObj, '需要操作的赏品列表')
        },
        //确认选择
        enter() {
            this.$store.state.canadvList = this.selHouObj
            this.$goBack()
        }
    }
}
</script>
<style lang="scss" scoped>
.content_bvox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 28rpx;
    flex-wrap: wrap;

    .big_con_box {
        width: 160rpx;
        margin-bottom: 40rpx;

        .dange_box {
            width: 160rpx;
            height: 221rpx;
            background-size: 100% 100%;
            position: relative;
            margin-bottom: 13rpx;
            box-sizing: border-box;

            .dengji_box {
                font-family: text1;
                font-weight: bold;
                font-size: 24rpx;
                color: #E7CE18;
                position: absolute;
                top: 5rpx;
                left: 18rpx;

                &.dengji_box_1 {
                    color: #E7CE18;
                }

                &.dengji_box_2 {
                    color: #D876FC;
                }

                &.dengji_box_6 {
                    color: #F9B7B1;
                }

                &.dengji_box_8 {
                    color: #FEB0D1;
                }
            }

            .dengji_box1 {
                font-family: text1;
                font-weight: bold;
                font-size: 24rpx;
                color: #E7CE18;
                position: absolute;
                top: 5rpx;
                left: 18rpx;

                &.dengji_box1_1 {
                    color: #C5F7FD;
                }

                &.dengji_box1_2 {
                    color: #EBC5FD;
                }

                &.dengji_box1_3 {
                    color: #FDC5EB;
                }

                &.dengji_box1_4 {
                    color: #FFEE1F;
                }
            }

            .yuan_box {
                width: 24rpx;
                height: 24rpx;
                position: absolute;
                right: 10rpx;
                top: 20rpx;
                z-index: 2;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .image_box {
                position: absolute;
                max-width: 96rpx;
                height: 140rpx;
                top: 28rpx;
                left: 15rpx;

                image {
                    height: 100%;
                }
            }

            .yuansu_box {
                position: absolute;
                width: 100%;
                height: 19rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
                text-align: center;
                bottom: 25rpx;
            }
        }

        .name_box {
            width: 100%;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 23rpx;

        }

        .bujinqi_box {
            margin: auto;
            width: 120rpx;
            height: 30rpx;
            bottom: 30rpx;
            right: 30rpx;

            .minus {
                width: 30rpx;
                height: 30rpx;
                background-size: 100% 100%;
            }

            .input {
                padding: 0 10rpx;
                height: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #FFFFFF;
                line-height: 30rpx;
            }

            .plus {
                width: 30rpx;
                height: 30rpx;
                background-size: 100% 100%;
            }
        }

    }

}

// .content_bvox {
//     width: 100%;
//     display: flex;
//     justify-content: space-between;
//     box-sizing: border-box;
//     padding: 0 28rpx;
//     flex-wrap: wrap;

//     .big_con_box {
//         width: 160rpx;
//         margin-bottom: 30rpx;

//         .dange_box {
//             width: 160rpx;
//             height: 221rpx;
//             background-size: 100% 100%;
//             position: relative;
//             margin-bottom: 13rpx;
//             box-sizing: border-box;

//             .dengjinum_box {
//                 position: absolute;
//                 right: 10rpx;
//                 font-size: 18rpx;
//                 top: 5rpx;
//                 color: #FFFFFF;
//             }

//             .dengji_box {
//                 font-family: text1;
//                 font-weight: bold;
//                 font-size: 24rpx;
//                 color: #E7CE18;
//                 position: absolute;
//                 top: 5rpx;
//                 left: 18rpx;

//                 &.dengji_box_1 {
//                     color: #E7CE18;
//                 }

//                 &.dengji_box_2 {
//                     color: #D876FC;
//                 }

//                 &.dengji_box_6 {
//                     color: #F9B7B1;
//                 }

//                 &.dengji_box_8 {
//                     color: #FEB0D1;
//                 }
//             }

//             .dengji_box1 {
//                 font-family: text1;
//                 font-weight: bold;
//                 font-size: 24rpx;
//                 color: #E7CE18;
//                 position: absolute;
//                 top: 5rpx;
//                 left: 18rpx;

//                 &.dengji_box1_1 {
//                     color: #C5F7FD;
//                 }

//                 &.dengji_box1_2 {
//                     color: #EBC5FD;
//                 }

//                 &.dengji_box1_3 {
//                     color: #FDC5EB;
//                 }

//                 &.dengji_box1_4 {
//                     color: #FFEE1F;
//                 }
//             }

//             .yuan_box {
//                 width: 24rpx;
//                 height: 24rpx;
//                 position: absolute;
//                 right: 10rpx;
//                 top: 20rpx;

//                 image {
//                     width: 100%;
//                     height: 100%;
//                 }
//             }

//             .image_box {
//                 position: absolute;
//                 max-width: 96rpx;
//                 height: 140rpx;
//                 top: 28rpx;
//                 left: 15rpx;

//                 image {
//                     height: 100%;
//                 }
//             }

//             .yuansu_box {
//                 position: absolute;
//                 width: 100%;
//                 height: 19rpx;
//                 font-family: PingFang SC;
//                 font-weight: 500;
//                 font-size: 20rpx;
//                 color: #FFFFFF;
//                 text-align: center;
//                 bottom: 25rpx;
//             }
//         }

//         .name_box {
//             width: 100%;
//             font-family: PingFang SC;
//             font-weight: bold;
//             font-size: 24rpx;
//             color: #FFFFFF;
//             overflow: hidden;
//             text-align: center;
//             text-overflow: ellipsis;
//             white-space: nowrap;

//         }

//     }

// }

.bottom_box {
    width: 750rpx;
    height: 172rpx;
    background-color: rgba(28, 8, 2, 1);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;

    .left {
        width: 245rpx;
        height: 90rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 90rpx;
    }

    .rightanniu_box {
        width: 210rpx;
        height: 90rpx;
        background-size: 100% 100%;
        font-family: text1;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFEDD7;
        line-height: 90rpx;
        font-style: italic;
        text-align: center;
    }
}

// .bg_box {}</style>